<template>
  <div class="container">
    <Menu></Menu>
    <div class="box">
      <div class="box-main">
        <div class="box-main-top">
          <span class="box-main-top-category">直播分类</span>
          <span v-for="(item, index) in 6" :key="index" class="box-main-top-categoryItem">摸鱼</span>
        </div>
        <t-divider></t-divider>
        <div class="box-main-content">
          <div v-for="(item, index) in 10" :key="index" class="box-main-content-item" @click="goDetail(index)">
            <img class="box-main-content-item-bg" src="@/assets/bg11.jpg" alt="" />
            <div class="box-main-content-item-user">
              <img class="box-main-content-item-user-avatar" src="@/assets/datou.jpg" alt="" />
              <div class="box-main-content-item-user-right">
                <div class="box-main-content-item-user-right-name">一只呆瓜</div>
                <div class="box-main-content-item-user-right-time">2024-10-31</div>
              </div>
            </div>
            <div class="box-main-content-item-title"></div>
          </div>
        </div>
      </div>
      <div class="box-sider"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';

import Menu from '../../components/Menu.vue';

const router = useRouter();
const goDetail = (index) => {
  router.push('/live/detail');
};
</script>

<style scoped>
@import './index.less';
</style>
